<!-- 系统参数 -->
<template>
  <div class="container">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="240px">
      <el-form-item label="巡查超时允许时间段：" prop="AllowedOverTime">
        <el-col :span="11">
          <el-input v-model="ruleForm.AllowedOverTime" />
        </el-col>
        <el-col :span="9">
          <p class="hint">（单位：分钟，范围：0-1000）</p>
        </el-col>
      </el-form-item>

      <el-form-item label="求助按钮重复按下生效时间：" prop="takeEffectTime" style="align-items: center;">
        <el-col :span="11">
          <el-input v-model="ruleForm.takeEffectTime" />
        </el-col>
        <el-col :span="9">
          <p class="hint">（单位：分钟，范围：0-10）</p>
        </el-col>
      </el-form-item>

      <el-form-item label="求助消息允许等待处理的时间：" prop="disposeTime" style="align-items: center;">
        <el-col :span="11">
          <el-input v-model="ruleForm.disposeTime" />
        </el-col>
        <el-col :span="9">
          <p class="hint">（单位：分钟，范围：0-1000，求助消息较长等待后仍无人处理，将会出现在首页的任务监控-任务监控-求助超时订单中）</p>
        </el-col>
      </el-form-item>

      <el-form-item label="待派单消息允许等待派单的时间：" prop="sendOrdersTime" style="align-items: center;">
        <el-col :span="11">
          <el-input v-model="ruleForm.sendOrdersTime" />
        </el-col>
        <el-col :span="9">
          <p class="hint">（单位：分钟，范围：0-1000，对于已经出现在任务监控-求助超时订单中的任务，如果较长时间无人处理，将向负责人发送短信）</p>
        </el-col>
      </el-form-item>

      <el-form-item label="老人请假状态下是否照常巡视：" prop="patrol">
        <el-radio-group v-model="ruleForm.patrol">
          <el-radio label="照常巡视" />
          <el-radio label="跳过巡视" />
        </el-radio-group>
      </el-form-item>

      <el-form-item label="员工服务是否必须拍照：" prop="photograph">
        <el-radio-group v-model="ruleForm.photograph">
          <el-radio label="必须拍照" />
          <el-radio label="非必须拍照" />
        </el-radio-group>
      </el-form-item>

      <el-form-item class="submitBox">
        <el-button type="primary" @click="submitForm('ruleForm')">提交修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      ruleForm: {
        AllowedOverTime: '', // 允许超过时间
        takeEffectTime: '', // 生效时间
        disposeTime: '', // 处理时间
        sendOrdersTime: '', // 派单时间
        patrol: '', // 巡逻
        photograph: '' // 拍照
      },
      rules: {
        AllowedOverTime: [
          { required: true, message: '请输入允许超时时间', trigger: 'blur' },
          { required: true, pattern: '^([1-9]|[1-9]\\d|1000)$', message: '请输入正确的时间', trigger: 'blur' }
        ],
        takeEffectTime: [
          { required: true, message: '请输入生效时间', trigger: 'blur' },
          { required: true, pattern: '^([0-9](\.[0-9]+)?|10)$', message: '请输入正确的时间', trigger: 'blur' }
        ],
        disposeTime: [
          { required: true, message: '请输入处理时间', trigger: 'blur' },
          { required: true, pattern: '^([1-9]|[1-9]\\d|1000)$', message: '请输入正确的时间', trigger: 'blur' }
        ],
        sendOrdersTime: [
          { required: true, message: '请输入派单时间', trigger: 'blur' },
          { required: true, pattern: '^([1-9]|[1-9]\\d|1000)$', message: '请输入正确的时间', trigger: 'blur' }
        ],
        patrol: [
          { required: true, message: '请选择老人请假状态下是否照常巡视', trigger: 'change' }
        ],
        photograph: [
          { required: true, message: '请选择员工服务是否必须拍照', trigger: 'change' }
        ]

      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
.container {
  padding: 20px;
//   .submitBox{
//      display: flex;
//      justify-content: center;

//   }
   .hint{
      padding-left: 10px;
      display: inline block;
      line-height: 20px;
      color: rgb(100, 159, 214);
   }
}
</style>
